<template>
  <div>
    <h1>
      芙蓉楼送辛渐
      <!-- 3. 点击事件, 修改isShow的值 -->
      <button @click="isShow = !isShow">
        <!-- 4. {{}}切换  -->
        {{ isShow ? "收起" : "展开" }}
      </button>
    </h1>

    <!-- 2. v-show控制显示 -->
    <div v-show="isShow">
      <p>寒雨连江夜入吴，</p>
      <p>平明送客楚山孤</p>
      <p>洛阳亲友如相问</p>
      <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
/*
  学习目标：折叠面板
  步骤：
*/
export default {
  data() {
    return {
      // 1. 声明数据isShow
      isShow: true,
    };
  },
};
</script>

<style></style>
